HTMLify
index.html
Views: 291 | Author: cody
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>On Scroll And hover Effect With GSAP And Clip</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script> </head> <body> <div class="container"> <h1 class="text">TEXT EFFECT<span>TEXT EFFECT</span></h1> <h1 class="text">USING GSAP<span>USING GSAP</span></h1> <h1 class="text">HOVER ON ME<span>HOVER ON ME</span></h1> </div> <script> gsap.registerPlugin(ScrollTrigger); const textElements = gsap.utils.toArray(".text"); textElements.forEach((text) => { gsap.to(text, { backgroundSize: "100%", ease: "none", scrollTrigger: { trigger: text, start: "center 80%", end: "center 20%", scrub: true, }, }); }); </script> </body> </html> |